<template>
  <!-- 宠物档案 -->
  <view class="shopListBox">
    <view class="shopListMain">
      <view class="leftList">
        <view v-for="(item, index) in leftDiartList" :key="index" class="card">
          <!-- image 是否是图片 1是图片 2不是图片， -->
          <view v-if="item.isImage === '1'" class="image-container" :style="{ height: item.height + 'rpx' }">
            <image :src="item.image" class="image"></image>
            <text class="DirartText">{{ item.title }}</text>
          </view>
          <view v-else class="video-container" :style="{ height: item.height + 'rpx' }">
            <image :src="item.image" class="image"></image>
            <image class="bofangImg" src="/static/my/bofangIcon.png" mode=""></image>
            <text class="DirartText">{{ item.title }}</text>
          </view>
        </view>
      </view>
      <view class="rightList">
        <view v-for="(item, index) in rightDiartList" :key="index" class="card">
          <view v-if="item.isImage === '1'" class="image-container" :style="{ height: item.height + 'rpx' }">
            <image :src="item.image" class="image"></image>
            <text class="DirartText">{{ item.title }}</text>
          </view>
          <view v-else class="video-container" :style="{ height: item.height + 'rpx' }">
            <image :src="item.image" class="image"></image>
            <image class="bofangImg" src="/static/my/bofangIcon.png" mode=""></image>
            <text class="DirartText">{{ item.title }}</text>
          </view>
        </view>
        <view class="moreText" v-if="showmore">
          查看更多 >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      num: {
        type: Number
      },
      showmore: {
        type: Boolean
      }
    },
    data() {
      return {
        diaryList: [{
            title: '04.26春游计划|上海站预热中',
            image: '/static/my/pic1@2x.png',
            isImage: '1', //是否是图片  1是图片  2不是图片，
            height: 440
          },
          {
            title: '04.22毛孩子时装直播热烈围观~~',
            image: '/static/my/pic2@2x.png',
            isImage: '1', //是否是图片  1是图片  2不是图片，
            height: 340
          },
          {
            title: '脑子乱乱的，意志淡淡的',
            image: '/static/my/pic3@2x.png',
            isImage: '1', //是否是图片  1是图片  2不是图片，
            height: 340
          },
          {
            title: '周周医生有话说，来听',
            image: '/static/my/pic4@2x.png',
            isImage: '2', //是否是图片  1是图片  2不是图片，
            height: 340
          },
          {
            title: '脑子乱乱的，意志淡淡的',
            image: '/static/my/pic5@2x.png',
            isImage: '1', //是否是图片  1是图片  2不是图片，
            height: 400
          },
          {
            title: '脑子乱乱的，意志淡淡的',
            image: '/static/my/pic6@2x.png',
            isImage: '1', //是否是图片  1是图片  2不是图片，
            height: 400
          },
        ],
        leftDiartList: [],
        rightDiartList: []

      }
    },
    mounted() {
      if (this.num) {
        this.newDiaryList = this.diaryList.splice(0, this.num)
      } else {
        this.newDiaryList = this.diaryList
      }

      this.handleDiaryList();
    },
    methods: {
      handleDiaryList() {
        this.newDiaryList.forEach((item, index) => {
          if (index % 2 === 0) {
            // 双数索引
            this.leftDiartList.push(item);
          } else {
            // 单数索引
            this.rightDiartList.push(item);
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shopListBox {}

  .shopListMain {
    display: flex;
    justify-content: space-between;
  }

  .leftList {
    width: 49%;
  }

  .rightList {
    width: 49%;
  }

  .moreText {
    font-weight: 400;
    font-size: 24rpx;
    color: #C69C6D;
    margin: 60rpx auto 0;
    text-align: center;
  }

  .card {
    width: 100%;
    margin-bottom: 14rpx;
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .image-container {
    overflow: hidden;
    position: relative;
  }

  .image {
    width: 100%;
    height: 100%;
  }

  .video-container {
    overflow: hidden;
    position: relative;
  }

  .bofangImg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    top: 16rpx;
    right: 16rpx;
  }

  .DirartText {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 26rpx 24rpx;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 0rpx 0rpx 16rpx 16rpx;
    font-weight: bold;
    font-size: 24rpx;
    color: #FFFFFF;
  }
</style>